<template>
  <div class="app-header">
    <div class="van-nav-bar van-hairline--bottom">
      <div class="van-nav-bar__content">
        <NavBar left-text="返回" left-arrow @click-left="goBack" />
        <div class="van-nav-bar__title van-ellipsis">{{ order.title }}</div>
      </div></div></div>
  <div class="order-detail">
    <el-card>
      <h2>订单详细信息</h2>
      <p><strong>订单 ID:</strong> {{ order.id }}</p>
      <p><strong>标题:</strong> {{ order.title }}</p>
      <p><strong>状态:</strong> {{ order.status }}</p>
      <p><strong>日期:</strong> {{ order.date }}</p>
      <p><strong>商品:</strong> {{ order.items.join(', ') }}</p>
<!--      <el-button @click="goBack">返回</el-button>-->
    </el-card>
  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router';
import {NavBar} from "vant";

export default {
  components: {NavBar},
  data() {
    return {
      order: null,
      orders: [
        { id: 1, title: '订单 001', status: '已发货', date: '2025-02-08', items: ['商品 A', '商品 B'] },
        { id: 2, title: '订单 002', status: '待发货', date: '2025-02-07', items: ['商品 C', '商品 D'] },
        { id: 3, title: '订单 003', status: '已完成', date: '2025-02-06', items: ['商品 E', '商品 F'] },
      ],
    };
  },
  created() {
    const route = useRoute();
    const orderId = parseInt(route.params.orderId, 10);
    this.order = this.orders.find(order => order.id === orderId);
  },
  methods: {
    goBack() {
      this.$router.push({ name: 'list' });
    },
  },
};
</script>

<style scoped>
.order-detail {
  margin: 20px;
}
</style>
